.lifepayment-container{
  margin-left:20px;
  margin-top:20px;
  >div{
    min-height: 700px;
  }
  .left-container{
    width: 380px;
    >div{
      height: 220px;
      box-shadow: 0 0 5px 5px rgba(144, 195, 31, .05);
      background-color: #fff;
      padding:30px;
      color: #333;
    }
    .circle{
      position: relative;
      width:80%;
      height: 130px;
      line-height:130px;
      margin:0 auto;
      .num{
        position: absolute;
        top:-14px;
        left:45px;
      }
      .residue{
        position: absolute;
        top:50%;
        left:-1px;
        width: 130px;
        height:65px;
        background-color: rgba(247,199,165,.7);
        border-radius: 0 0 65px 65px;
      }
    }
    .top{
      margin-bottom:20px;
      .circle{
        color: #dd5407;
        .residue{
          background-color: rgba(247,199,165,.7);
        }
      }
    }
    .bottom{
      .circle{
        color: #369efe;
        .residue{
          background-color: rgba(212,232,254,.7);
        }
      }
    }
  }
  .right-container{
    width: 630px;
    height: 610px;
    box-shadow: 0 0 5px 5px rgba(144, 195, 31, .05);
    background-color: #fff;
    padding:20px;
    .bill-title{
      position: relative;
      .tit{
        font-size: 20px;
        color: #666;
      }
      .gradient-btn{
        width: 100px;
        height: 40px;
        position: absolute;
        right:0;
      }
    }
    .bill-list{
      .list{
        width: 100%;
        height: 176px;
        border-bottom:2px solid #eee;
        margin-top: 15px;
        padding-right:8px;
        .month{
          position: relative;
          width: 15%;
          height: 176px;
          line-height:176px;
          text-align: center;
          color: #333;
          font-size: 18px;
          p:after{
            content: '';
            width: 30px;
            height: 4px;
            background-color: #90c31f;
            position: absolute;
            top:100px;
            left:27px;
          }
        }
        .detail{
          width: 84%;
          height: 100%;
          padding-right:10px;
          >ul{
            width:100%;
            height: 88px;
            li{
              float: left;
              width: 25%;
              text-align: center;
              p:first-child{
                margin-top:30px;
              }
            }
            .t{
              p:first-child{
                margin-top:20px;
              }
            }
          }
          .water{
            border-bottom:2px solid #eee;
          }
          .water-color{
            color: #369efe;
          }
          .elect-color{
            color: #feb45e;
          }
        }
      }
    }
  }
}
